<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="" enctype="multipart/form-data">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">

                <div class="layui-form-item">
                    <label class="layui-form-label">菜品名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name"  lay-verify="required" autocomplete="off" placeholder="菜品名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜品种类</label>
                    <div class="layui-input-inline">
                        <select name="kId" id="kId" class="valid">
                            <option disabled="disabled" selected="selected" >---请选择---</option >
                            <option  th:each="kind:${list}" th:value="${kind.id}" th:text="${kind.name}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-inline">
                        <input type="number"  name="price" lay-verify="required" autocomplete="off" placeholder="价格" class="layui-input">
                    </div>
                </div>

                <!-- 上传图片 -->
                <div class="layui-form-item" style="width: 80%">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="img"  name="img" lay-verify="required" autocomplete="off" >
                        <button type="button" class="layui-btn" id="upload">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img"  width="100px" height="80px"  id="demo">
                            <p id="demoText"></p>
                        </div>

                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select id="status" name="status" class="valid">
                                <option value="0">正常</option>
                                <option value="1">售罄</option>
                        </select>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" id="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="food-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>

        </div>
    </div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
layui.use(['form','jquery','upload','layedit'],function(){
    let form = layui.form;
    let $ = layui.jquery;
    let upload = layui.upload;
    let layedit = layui.layedit;


    var index=layedit.build('message',{
        tool: [
            'strong' //加粗
            ,'italic' //斜体
            ,'underline' //下划线
            ,'del' //删除线
            ,'|' //分割线
            ,'left' //左对齐
            ,'center' //居中对齐
            ,'right' //右对齐
            ,'link' //超链接
            ,'unlink' //清除链接
        ]
    });


    var uploadInst = upload.render({
        elem: '#upload'
        ,url: '/food/uploadImage' //改成您自己的上传接口
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            console.log(obj);
            obj.preview(function(index, file, result){
                $('#demo').attr('src', result); //图片链接（base64）
            });
        }
        ,done: function(res){
            //如果上传失败
            if(res.code > 0){
                return layer.msg('上传失败');
            }
            $('#img').attr('value',res.data);
            console.log(res.data);

            //上传成功的一些操作
            $('#demoText').html(''); //置空上传失败的状态
        }
        ,error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
        }
    });


    form.verify({
        content:function () {
            return layedit.sync(index);
        }
    })

    form.on('submit(food-save)', function(data){
        console.log(data.field);
        $.ajax({
            type: 'post', // 提交方式 get/post
            url: '/food/addFood', // 需要提交的 url
            data: data.field,
            // data: {
            //     id: $('input[name=id]').val(),
            //     name: $('input[name=name]').val(),
            //     sex: $('input[name=sex]').val(),
            //     age: $('input[name=age]').val(),
            //     kind: $('input[name=kind]').val(),
            //     message:$('#message').val(),
            //     status: $('#status').val()
            // },
            // processData: false,
            // contentType: false,
            success:function(result){
                if (parseInt(result.code) === 200) {
                    layer.msg(result.message, {
                        icon: 1,
                        time: 1000,
                        area:['120px','100px']
                    },function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        parent.layui.table.reload("food-table");
                    });
                } else {
                    layer.msg(result.message, {
                        icon: 2,
                        time: 1000,
                        area:['120px','180px']
                    },function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        parent.layui.table.reload("food-table");
                    });
                }
            },
            error:function (result) {
                console.log("error "+result.message);
            }
        });
        return false;
    });
})
</script>
<script>
</script>
</body>
</html>